<!--
 * @Author: wfshjkg xumengte@126.com
 * @Date: 2023-12-01 14:08:50
 * @LastEditors: wfshjkg xumengte@126.com
 * @LastEditTime: 2024-01-24 21:41:00
 * @FilePath: /emcs-v3/src/views/statistic/energy/distribution.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex-row">
    <div class="mapopView">
      <div class="mapopContain">
        <div class="mapopFlex">
          <div class="mapopTitle mapText">编号</div>
          <div class="mapopTitle flex4">建筑名称</div>
          <div class="mapopTitle flex2">年累计能耗(kgce)</div>
          <div class="mapopTitle flex2">同比降低(kgce)</div>
        </div>
        <el-scrollbar>
          <div
            class="mapopRow"
            :class="pointvalue == index ? 'bgselect' : ''"
            v-for="(item, index) in 12"
            :key="index"
            @click="itemAction(index)"
          >
            <div
              class="mapopCircle"
              :class="pointvalue == index ? 'bgred' : 'bgblue'"
            >
              {{ index + 1 }}
            </div>
            <div class="mapopText flex4">{{ "科学建筑医学院" }}</div>
            <div class="mapopText flex2">{{ 100 }}</div>
            <div class="mapopText flex2" style="color: #1fad60">
              {{ 100 * 0.25 }}
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div id="redhot-amap" style="height: 96vh; width: 72%"></div>
  </div>
</template>

<script lang="ts" name="distribution" setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, onMounted, reactive } from "vue";
let hotPointArray = ref([]);
const numChar = "零壹贰叁肆伍陆柒捌玖";
const selvalue = ref(0);
const pointvalue = ref(0);
let amapKey = ref("import.meta.env.VITE_APP_AMAP_KEY");
let inner3Colors = [
  "#0000FF60",
  "#0000FF80",
  "#0000FF",
  "#00FF00",
  "#ffea00",
  "#FF0000",
];
let baseMap;
let normalMarker;
let mapEnable = true;
const buttonRef = ref();
const popoverRef = ref();
function itemAction(index) {
  pointvalue.value = index;
  let item = hotPointArray.value[index];
  console.log("ItemAction==>>", item.lng);
  if (!mapEnable) {
    mapEnable = true;
    baseMap.remove(normalMarker);
  }
  let imagesrc = getOssHttpUrl(item.image);
  let imagec = `<image src=${imagesrc} style="width:72px;height:72px;border-radius: 4px;"></image>`;
  let content = `<div>${item.name}</div>`;
  let content1 = `<div>能耗值：${item.number} kgce</div>`;
  let content2 = `<div>节能状况：${item.number * 0.25}↑</div>`;
  let contentLeft = `<div class="infoLeft">${imagec}</div>`;
  let contentRight = `<div class="infoRight">${content}${content1}${content2}</div>`;
  normalMarker.setContent(
    '<div class="amap-info-window">' + contentLeft + contentRight + "</div>"
  );
  normalMarker.setPosition([item.lng, item.lat]);
  baseMap.add(normalMarker);
  baseMap.setZoomAndCenter(16, [item.lng, item.lat]);
}
//------------------------------------------------------数据定义
let userInfo = useUserStore().getUserInfo; //加载用户相关信息
let projectArr = useUserStore().getProjectArr; //加载项目相关信息
//---------------------------------------------------生命周期
const getProjectList = async () => {
  await defHttp
    .get({ url: "/dlzj/projectList" }, { errorMessageMode: "none" })
    .then((res) => {
      if (res) {
        projectArr = res;
        console.log("res==>>", res);
        useUserStore().setProjectArray(res);
      }
    })
    .catch(() => {});
};
onMounted(async () => {
  console.log("projectArr==>>", projectArr.length);
  if (!(projectArr && projectArr.length)) {
    console.log("projectArr==109>>");
    await getProjectList();
  }
  console.log("projectArr==113>>");
  console.log(numChar.slice(-4, -2)); // [ 1, 3, 5 ]
  AMapLoader.load({
    key: amapKey.value, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.Geocoder",
      "AMap.Marker",
      "AMap.PlaceSearch",
      "AMap.HeatMap",
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca: {
      //是否加载 Loca,缺省不加载
      version: "2.0.0", //Loca 版本,缺省1.3.2
    },
  })
    .then((AMap) => {
      let arr = [121.53613, 38.965124];
      //此处经纬度需反转(项目格式之前是反的)
      baseMap = new AMap.Map("redhot-amap", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 12, // 初始化地图级别
        zooms: [12, 20],
        resizeEnable: true,
        center: arr, // 初始化地图中心点位置
      });

      if (isSupportCanvas()) {
        if (projectArr && projectArr.length) {
          let projectList = projectArr.sort((a, b) => {
            if (a.name == "大连市传染病医院综合服务楼") {
              return -1;
            }
          });
          hotPointArray.value = [];
          let featuresArray = [];
          let firstCount = parseInt(projectList[0].sumRes["01year"]);
          projectList.forEach((item, index) => {
            let techStr = item.tech;
            let techArr = techStr.split(",");
            let inumber = item.sumRes["01year"].toFixed(0);
            inumber = inumber > firstCount / 5 ? inumber : firstCount / 5;
            let itemCount = parseInt((inumber / firstCount) * 100);
            console.log("itemCount==>>", itemCount);
            console.log("item==>>", item);
            let geoItem = {
              type: "Feature",
              properties: {
                number: inumber,
                name: item.name,
                address: item.name,
                image: item.projectLogo,
              },
              geometry: {
                type: "Point",
                coordinates: [techArr[1], techArr[0]],
              },
            };
            featuresArray.push(geoItem);
            hotPointArray.value.push({
              lng: techArr[1],
              lat: techArr[0],
              count: itemCount,
              name: index ? item.name : "大连市传染病医院综合服务楼",
              number: inumber,
              image: item.projectLogo,
            });
          });
          console.log("featuresArray==>>", featuresArray);
          baseMap.plugin(["AMap.HeatMap"], function () {
            //初始化heatmap对象
            let heatmap = new AMap.HeatMap(baseMap, {
              radius: 25, //给定半径
              opacity: [0, 0.8],
            });
            console.log("heatmap==>>", heatmap);
            //设置数据集：该数据为北京部分“公园”数据
            heatmap.setDataSet({
              data: hotPointArray.value,
              max: 100,
            });
          });
          console.log("locaContainer==>>");
          var locaContainer = new Loca.Container({
            map: baseMap,
          });
          console.log("locaContainer==>>");
          var labelsLayer = (window.labelsLayer = new Loca.LabelsLayer({
            zooms: [10, 20],
          }));
          console.log("FeatureCollection==>>");
          let geoData = {
            type: "FeatureCollection",
            features: featuresArray,
          };

          var geoSource = new Loca.GeoJSONSource({
            data: geoData,
          });
          console.log("setSource==>>");
          labelsLayer.setSource(geoSource);

          labelsLayer.setStyle({
            icon: {
              type: "image",
              // image: '../../src/assets/icons/Vector@2x.png',
              size: [24, 38],
              anchor: "center",
            },
            text: {
              // 每项配置都可使用回调函数来动态配置
              content: (index, feat) => {
                return feat.properties.name;
              },
              style: {
                fontSize: 12,
                fontWeight: "normal",
                fillColor: "#5CDE8E",
                strokeColor: "#000",
                strokeWidth: 2,
              },
              direction: "bottom",
            },
            extData: (index, feat) => {
              console.log("feat==>>", feat);
              return feat.properties;
            },
          });
          locaContainer.add(labelsLayer);
          console.log("labelsLayer==>>");
          normalMarker = new AMap.Marker({
            offset: [0, -36],
          });
          labelsLayer.on("complete", () => {
            var labelMarkers = labelsLayer.getLabelsLayer().getAllOverlays();
            for (let marker of labelMarkers) {
              marker.on("click", (e) => {
                var position = e.data.data && e.data.data.position;
                if (position) {
                  console.log("e.data==>>", e.data);
                  console.log("position==>>", position);
                  let extData = marker.getExtData();
                  console.log("extData==>>", extData);
                  let imagesrc = getOssHttpUrl(extData.image);
                  let imagec = `<image src=${imagesrc} style="width:72px;height:72px;border-radius: 4px;"></image>`;
                  let content = `<div>${extData.name}</div>`;
                  let content1 = `<div>能耗值：${extData.number} kgce</div>`;
                  let content2 = `<div>节能状况：${
                    extData.number * 0.25
                  }↑</div>`;
                  let contentLeft = `<div class="infoLeft">${imagec}</div>`;
                  let contentRight = `<div class="infoRight">${content}${content1}${content2}</div>`;
                  normalMarker.setContent(
                    '<div class="amap-info-window">' +
                      contentLeft +
                      contentRight +
                      "</div>"
                  );
                  normalMarker.setPosition(position);
                  baseMap.add(normalMarker);
                }
                mapEnable = false;
              });
            }
          });
          baseMap.on("click", (e) => {
            mapEnable = true;
            baseMap.remove(normalMarker);
          });
        }
      } else {
        alert(
          "热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~"
        );
      }
    })
    .catch((e) => {
      console.log(e);
    });
});
//判断浏览区是否支持canvas
function isSupportCanvas() {
  var elem = document.createElement("canvas");
  return !!(elem.getContext && elem.getContext("2d"));
}
//---------------------------------------------------methods
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  user-select: none;
  list-style: none;
  box-sizing: border-box;
}

.flex-row {
  display: flex;
  width: 100%;
  height: 96vh;
}

.mapopView {
  width: 28%;
  display: flex;
  height: 96vh;
  flex-direction: column;
  top: 0;
  background: white;
}

.edselect {
  width: 92%;
  margin: 4%;
}

/deep/.el-select {
  width: 100%;
  height: 48px;
}

// 设置输入框的背景色、字体颜色、边框属性设置；
/deep/.el-input__inner {
  width: 100%;
  height: 48px;
}

.el-select-dropdown__item {
  height: 48px;
  line-height: 48px;
  padding: 0 1vw;
}

.mapopContain {
  width: 92%;
  margin-left: 4%;
  margin-right: 4%;
  padding: 4%;
  border-radius: 8px;
  border: 1px solid #d8e2ee;
  box-shadow: 0px 4px 10px 0px #eaecf2;
  display: flex;
  flex-direction: column;
}

.mapopFlex {
  display: flex;
  height: 6vh;
  align-items: center;
  background: #f8f9ff;
}

.mapopRow {
  display: flex;
  height: 6vh;
  cursor: pointer;
  align-items: center;
}

.mapopRow:hover {
  transition: all 0.3s linear;
  transform: translateY(-4px);
}

.mapopRow:nth-child(2n) {
  background-color: #f8f9fa;
}

.mapopLayer {
  width: 2vw;
  height: 2vw;
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
}

.mapopLay0 {
  width: 2vw;
  height: 0;
  border-width: 0 0.2vw 0.5vw 0.2vw;
  border-style: solid;
  border-color: #0000ff40 transparent;
}

.mapopLay1 {
  width: 1.72vw;
  height: 0;
  border-width: 0 0.2vw 0.5vw 0.2vw;
  border-style: solid;
  border-color: #0000ff transparent;
}

.mapopLay2 {
  width: 1.5vw;
  height: 0;
  border-width: 0 0.2vw 0.5vw 0.2vw;
  border-style: solid;
  border-color: #00ff00 transparent;
}

.mapopLay3 {
  width: 1.2vw;
  height: 0;
  border-width: 0 0.2vw 0.5vw 0.2vw;
  border-style: solid;
  border-color: #ffea00 transparent;
}

.mapopLay4 {
  width: 0;
  height: 0;
  border-width: 0.5vw;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

.mapopTitle {
  display: flex;
  line-height: 14px;
  font-size: 12px;
}

.mapopText {
  display: flex;
  font-size: 12px;
}

.mapText {
  margin-left: 1vw;
  margin-right: 1vw;
}

.mapopCircle {
  display: flex;
  align-items: center;
  align-content: center;
  width: 2vh;
  height: 2vh;
  margin-left: 1vw;
  margin-right: 1vw;
  justify-content: center;
  border-radius: 1vh;
  color: white;
  font-size: 12px;
}

.bgblue {
  background: #4282f7;
}

.bgred {
  background: #e35241;
}

.bgselect {
  background: #e6eeff !important;
}

.bgnormal {
  background: #e35241;
}

.flex1 {
  flex: 1;
  margin-left: 6px;
  width: 100%;
}

.margin-left2 {
  margin-left: 2px;
}

.textCenter {
  text-align: center;
}

.flex2 {
  flex: 2;
  width: 100%;
}

.flex3 {
  flex: 3;
  width: 100%;
}

.flex4 {
  flex: 4;
  width: 100%;
}

/deep/.amap-info-window {
  width: 280px;
  height: 120px;
  display: flex;
  background: #fff;
  align-items: center;
  border-radius: 3px;
  padding: 4px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: relative;
}
/deep/.infoLeft {
  display: flex;
  flex: 1;
  padding: 4px;
  height: 80px;
  justify-content: center;
  flex-direction: column;
}
/deep/.infoRight {
  display: flex;
  padding: 4px;
  height: 80px;
  justify-content: space-around;
  flex: 2;
  font-size: 12px;
  flex-direction: column;
}
</style>
